<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<link type="text/css" rel="stylesheet" href="plug-in/ztree/css/zTreeStyle.css"/>
<!--ztree-->
<style type="text/css">
	#rMenu{
		background: #fafafa;
		position: absolute;
		box-shadow: 0 0 5px 1px #ccc;
		display: none;
		border-radius: 3px;
	}
	#rMenu:after{
		content: '';
		width: 0;
		height: 0;
		border-top: 10px solid transparent;
		border-right: 10px solid #eee;
		border-bottom: 10px solid transparent;
		border-left: 10px solid transparent;
		position: absolute;
		left: -20px;
		top: 20px;
	}
	#rMenu ul{
		list-style: none;
		padding: 0 10px;
	}
	#rMenu ul li{
		padding: 5px 0;
		text-align: center;
		border-bottom: 1px solid #e9e9e9;
	}
	#rMenu ul li:last-child{
		border: none;
	}
</style>
<script type="text/javascript" src="plug-in/ztree/js/jquery.ztree.all.js"></script>
<script>
	$(function () {
		proCateSpecModule.init();
		var treeObj;
	});
	var proCateSpecModule = (function () {
		var setting;
		//初始化ztree
		var ztreeInit = function(){
			var tree;
			setting = {
				check: {
					enable: true,
				},
				view: {
					dblClickExpand: false,
					showLine: true,
					selectedMulti: false
				},
				data: {
					simpleData: {
						enable:true,
						idKey: "id",
						pIdKey: "pId",
						rootPId: ""
					}
				},
				callback: {
					onClick: function(event, treeId, treeNode, clickFlag) {
						if(treeNode.isParent){
							alertTip("不能选择父节点","");
							return false;
						}
						treeClick(treeNode.id);
					},
					onRightClick:proCateSpecModule.zTreeOnRightClick,
					onRename:proCateSpecModule.onRename,//编辑之后触发
					beforeRemove:proCateSpecModule.beforeRemove,//删除前触发
					onRemove:proCateSpecModule.onRemove,//删除之后
					onMouseDown:proCateSpecModule.onMouseDown,//鼠标按下
					beforeCheck:proCateSpecModule.beforeCheck
				}
			};
			$.ajax({
				async : false,
				cache : false,
				type : 'POST',
				dataType : 'json',
				url : 'mallProductCategoryController.do?tree',// 请求的action路径
				error : function() {// 请求失败处理函数
				},
				success : function(data) {
					var d = data;
					if (d.success) {
						var zNodes = eval(data.obj);
						tree =  $.fn.zTree.init($("#cate_tree"), setting, zNodes);
						tree.expandAll(true);
					}
					if (!d.success) {
						var msg = d.msg;
						tip(msg);
					}
				}
			});
		}
		//树点击就事件
		var treeClick = function(cateid){
			$("#product_cate_spec_panel").panel({
				href:"mallProductCategoryController.do?specview&cateId="+cateid
			});
			$("#product_cate_spec_vale_panel").html("")
		}

		//显示右键菜单
		var showRMenu = function showRMenu(type, x, y, top) {
			$("#rMenu li").show();
			if (type=="root") {
				$("#m_del").hide();
				$("#m_edit").hide();
				$("#m_settop").hide();
				$("#m_canletop").hide();
			}
			if(type = "node"){
				if(top == "yes"){
					$("#m_settop").hide()
				}
				if(top == "no"){
					$("#m_canletop").hide()
				}
				if(top == "all"){
					$("#m_settop").hide();
					$("#m_canletop").hide();
				}
			}

			$("#rMenu").css({"top":(y-"30")+"px", "left":(x+50)+"px", "display":"block"});
		}
		//隐藏右键菜单
		var hideRMenu = function hideRMenu() {
			$("#rMenu").hide();
		}
		//定义节点对象
		var ZtreeNode = function ZtreeNode(id, pId, name) {//定义ztree的节点类
			this.id = id;
			this.pId = pId;
			this.name = name;
		}
		//删除请求
		var dleKnowClass = function(id){
			$.ajax({
				async : false,
				cache : false,
				type : 'POST',
				data : {"id":id},
				url : 'mallProductCategoryController.do?del',// 请求的action路径
				success : function(data) {
					var d = $.parseJSON(data);
					if (d.success) {
						reloadTree();
					}
					if (!d.success) {
						var msg = d.msg;
						tip(msg);
						reloadTree();
					}
				}
			});
		}

		//重新加载树
		var reloadTree = function(){
			hideRMenu();
			proCateSpecModule.init();
			$("#product_cate_spec_panel").html("");
			$("#product_cate_spec_vale_panel").html("");
		}

		var module = {
			init: function () {
				ztreeInit();
				treeObj = $.fn.zTree.getZTreeObj("cate_tree");
				//showValTable();
			},
			//树右击事件
			zTreeOnRightClick : function(event, treeId, treeNode){
				if (!treeNode) {
					treeObj.cancelSelectedNode();
					showRMenu("root", event.clientX, event.clientY);
				} else if (treeNode && !treeNode.noR) { //noR属性为true表示禁止右键菜单
					if (treeObj.newrole && event.target.tagName != "a" && $(event.target).parents("a").length == 0) {
						treeObj.cancelSelectedNode();
						showRMenu("root", event.clientX, event.clientY);
					} else {
						treeObj.selectNode(treeNode);
						if(treeNode.pId == ""){//根目录
							if(treeNode.isTop == 1){
								showRMenu("node", event.clientX, event.clientY, "yes");
							}else{
								showRMenu("node", event.clientX, event.clientY, "no");
							}
						}else{
							showRMenu("node", event.clientX, event.clientY, "all");
						}
					}
				}
			},
			//编辑之后触发
			onRename : function(event, treeId, treeNode) {
				if (treeNode.name == null || treeNode.name == "" || typeof (treeNode.name) == "undefined") {
					$.messager.confirm("", "请输入名称",  function () {
						var addZNode = treeObj.getNodeByParam("id", treeNode.id, null);
						treeObj.editName(addZNode);
					});
				} else {
					var proCate = function () {
						this.id = null;
						this.categoryname = "";
						this.categorycode = ~~(10000 * Math.random());
						this.parentcategoryid = 0;
						this.istop = 0;
					}
					var procate = new proCate();
					var id = treeNode.id + "";
					if (id.indexOf("root_") > -1) {//添加根节点
						procate.categoryname = treeNode.name;
					} else if (id.indexOf("children_") > -1) {//添加子节点
						procate.categoryname = treeNode.name;
						procate.parentcategoryid = treeNode.pId;
					} else {//编辑
						procate.id = id;
						procate.categoryname = treeNode.name;
						procate.parentcategoryid = treeNode.pId == null ? 0 : treeNode.pId;
						procate.istop = 0;
						procate.categorycode = treeNode.categorycode;
					}
					$.ajax({
						async : false,
						cache : false,
						type : 'POST',
						data : procate,
						url : 'mallProductCategoryController.do?save',// 请求的action路径
						success : function(data) {
							var d = $.parseJSON(data);
							if (d.success) {
								reloadTree();
							}
							if (!d.success) {
								var msg = d.msg;
								tip(msg);
								reloadTree();
								//proCateSpecModule.addPrivilege();
							}
						}
					});
				}
			},
			//删除前触发
			beforeRemove : function(treeId, treeNode){
				//验证
				var temp = true;
				$.ajax({
					async : false,
					cache : false,
					type : 'POST',
					data : {"id":treeNode.id},
					url : 'mallProductCategoryController.do?checkdel',
					success : function(data) {
						var d = $.parseJSON(data);
						if (!d.success) {//不能删除
							var msg = d.msg;
							tip(msg);
							temp = false;
						}
					}
				});
				if(!temp){
					temp = false;
				}
				return temp;
			},

			//删除之后
			onRemove : function(event, treeId, treeNode){
				dleKnowClass(treeNode.id);
			},

			//鼠标按下
			onMouseDown : function(){
				hideRMenu();
			},
			beforeCheck: function(treeId, treeNode) {
				return (treeNode.doCheck !== false);
			},
			//添加节点
			addPrivilege : function addPrivilege(){
				hideRMenu();
				var parentOrgId;//父节点id
				var parentZNode;//父节点
				var childZNode;//子节点
				var timestamp = Date.parse(new Date());//时间戳
				//获取ztree对象
				if(treeObj.getSelectedNodes().length == 0){//根节点
					parentOrgId = 'root_'+timestamp;
					parentZNode = null;
					childZNode = new ZtreeNode(parentOrgId, 0, ""); //构造根节点
				}else{//子节点
					parentOrgId = treeObj.getSelectedNodes()[0].id;
					parentZNode = treeObj.getNodeByParam("id", parentOrgId, null); //获取父节点
					childZNode = new ZtreeNode('children_'+timestamp, parentOrgId, ""); //构造子节点
					parentOrgId = 'children_'+timestamp;
				}
				treeObj.addNodes(parentZNode, childZNode, true);
				//设置编辑状态
				var addZNode = treeObj.getNodeByParam("id", parentOrgId, null);
				treeObj.editName(addZNode);
			},
			//删除节点
			delPrivilege : function(){
				var treeNode = treeObj.getSelectedNodes()[0];
				var delId = treeNode.id;
				var delZNode = treeObj.getNodeByParam("id", delId, null);
				if(treeNode.isParent && treeNode.children.length > 0){//为父节点并且有子节点
					alertTip(treeNode.name+"分类下有子分类，请先删除子分类","");
				}else{
					$.dialog.confirm("确认删除此节点", function(){
						treeObj.removeNode(delZNode, true);
					});
				}
				hideRMenu();
			},
			//编辑节点
			editPrivilege : function(){
				var editId = treeObj.getSelectedNodes()[0].id;
				var editZNode = treeObj.getNodeByParam("id", editId, null);
				treeObj.editName(editZNode);
				hideRMenu();
			},
			//置顶设置
			upTopPrivilege : function(isTop){
				var editId = treeObj.getSelectedNodes()[0].id;
				$.ajax({
					async : false,
					cache : false,
					type : 'POST',
					data : {"id":editId, "istop":isTop},
					url : 'mallProductCategoryController.do?upistop',
					success : function(data) {
						var d = $.parseJSON(data);
						if (d.success) {
							reloadTree();
						}
						if (!d.success) {
							var msg = d.msg;
							tip(msg);
							reloadTree();
						}
					}
				});
			}
		};
		return module;
	})();
</script>




<div class="easyui-layout" fit="true">
	<div region="center" split="true" style="padding-left: 5px;width: 100px" >
		<div class="easyui-panel" style="padding: 1px;width: 10px"  fit="true" border="false" >
			<input type="hidden" name="roleId" value="${roleId}" id="rid">
			<ul id="cate_tree" class="ztree"></ul>
		</div>
	</div>
	<div region="east" style="width: 900px; overflow: hidden;" split="true">
		<div class="easyui-layout" fit="true">
			<div region="center" style="padding: 1px; border: 0px;">
				<div class="easyui-panel" style="padding: 1px;" fit="true" border="false" id="product_cate_spec_panel"></div>
			</div>
			<div region="east" style="width: 400px; overflow: hidden;" split="true">
				<div class="easyui-panel" style="padding: 1px;" fit="true" border="false" id="product_cate_spec_vale_panel"></div>
			</div>
		</div>
	</div>
	<div>
		<!-- 右键菜单div -->
		<div id="rMenu">
			<ul>
				<li id="m_add" onclick="proCateSpecModule.addPrivilege();">
					<a type="button" class="btn btn-default btn-small" href="javascript:void(0)">增加</a>
				</li>
				<li id="m_del" onclick="proCateSpecModule.delPrivilege();">
					<a type="button" class="btn btn-danger btn-small" href="javascript:void(0)">删除</a>
				</li>
				<li id="m_edit" onclick="proCateSpecModule.editPrivilege();">
					<a type="button" class="btn btn-default btn-small" href="javascript:void(0)">编辑</a>
				</li>
				<li id="m_settop" onclick="proCateSpecModule.upTopPrivilege(1);">
					<a type="button" class="btn btn-default btn-small" href="javascript:void(0)">设为置顶</a>
				</li>
				<li id="m_canletop" onclick="proCateSpecModule.upTopPrivilege(0);">
					<a type="button" class="btn btn-default btn-small" href="javascript:void(0)">取消置顶</a>
				</li>
			</ul>
		</div>
	</div>
</div>
